{% extends "base.html" %}

{% block title %}{{ letter[1] }} - 展丞信件箱{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <div class="bg-white/90 backdrop-blur-sm rounded-xl p-8 shadow-lg">
        <div class="mb-6">
            <a href="/" class="text-pink-500 hover:text-pink-700 transition">
                <i class="fas fa-arrow-left mr-1"></i>返回首页
            </a>
        </div>

        <article class="prose prose-lg max-w-none">
            <h1 class="text-3xl font-bold text-gray-800 mb-4">
                <i class="fas fa-envelope-open text-pink-500 mr-2"></i>
                {{ letter[1] }}
            </h1>
            
            <div class="flex items-center text-sm text-gray-500 mb-6">
                <i class="fas fa-user mr-1"></i>
                <span>{{ letter[5] }}</span>
                <span class="mx-2">•</span>
                <i class="fas fa-calendar mr-1"></i>
                <span>{{ letter[4][:10] }}</span>
                <span class="mx-2">•</span>
                <i class="fas fa-eye mr-1"></i>
                <span>公开信件</span>
            </div>

            <div class="bg-gray-50 rounded-lg p-6">
                <p class="text-gray-700 whitespace-pre-wrap leading-relaxed">
                    {{ letter[2] }}
                </p>
            </div>
        </article>

        <div class="mt-8 text-center">
            <div class="text-4xl mb-4">🦊💌🐰</div>
            <p class="text-gray-500">愿这封信带给你温暖</p>
        </div>
    </div>
</div>
{% endblock %}
